<template>
    <i :class="iconSrc" @dragenter="dragenter($event,1,fileData)"
         class="file-icon" ondragstart="return false;"
       @drop="drop($event,fileData)" @click.shift="shiftClick(fileData)"></i>
</template>

<script>
  export default {
    name: "CheckFileIcon",
    data() {
      return {
        iconSrc: 'icon-1-1'
      }
    }, props: {
      drop: {
        type: Function,
        default: function () {

        }
      },
      dragleave: {
        type: Function,
        default: function () {

        }
      },
      dragenter: {
        type: Function,
        default: function () {

        }
      },
      shiftClick:{
        type:Function,
        default:function () {

        }
      },
      fileData: {
        type: Object,
        default: function () {
          return {}
        }
      },
      fileName: {
        type: String,
        default: function () {
          return ''
        }
      },
    }, created() {
      this.checkFileType()
    }, watch: {
      fileData: function () {
        this.checkFileType()
      }
    },
    methods: {
      checkFileType: function () {
        const nameArr = this.fileName.split('.')
        if (this.fileData.fileType === 1) {
          if (this.fileData.property === 0) {
            this.iconSrc = 'icon-1-1'
          } else {
            this.iconSrc = 'icon-1-2'
          }
        } else {
          this.iconSrc = this.publicFun.checkIcon(nameArr[nameArr.length - 1])
        }
      }
    }
  }
</script>

<style scoped>
    .file-icon{
        height: 60px;
        width: 60px;
        background-image: url("/file_icon/file_icon_list.png") ;
        display: inline-block;
        vertical-align: middle;
        background-size: 350px;
    }

    .icon-1-1{
        background-position: -15px -19px;
    }

    .icon-1-2{
        background-position: -101px -19px;
    }

    .icon-1-3{
        background-position: -188px -19px;
    }

    .icon-1-4{
        background-position: -275px -19px;
    }

    .icon-2-1{
        background-position: -15px -96px;
    }

    .icon-2-2{
        background-position: -101px -96px;
    }

    .icon-2-3{
        background-position: -188px -96px;
    }

    .icon-2-4{
        background-position: -275px -96px;
    }

    .icon-3-1{
        background-position: -15px -173px;
    }

    .icon-3-2{
        background-position: -101px -173px;
    }

    .icon-3-3{
        background-position: -188px -173px;
    }

    .icon-3-4{
        background-position: -275px -173px;
    }

    .icon-4-1{
        background-position: -15px -250px;
    }

    .icon-4-2{
        background-position: -101px -250px;
    }

    .icon-4-3{
        background-position: -188px -250px;
    }

    .icon-4-4{
        background-position: -275px -250px;
    }

    .icon-5-1{
        background-position: -15px -327px;
    }

    .icon-5-2{
        background-position: -101px -327px;
    }

    .icon-5-3{
        background-position: -188px -327px;
    }

    .icon-5-4{
        background-position: -275px -404px;
    }

    .icon-6-1{
        background-position: -15px -404px;
    }

    .icon-6-2{
        background-position: -101px -404px;
    }

    .icon-6-3{
        background-position: -188px -404px;
    }

    .icon-6-4{
        background-position: -275px -404px;
    }

    .icon-7-1{
        background-position: -15px -481px;
    }

    .icon-7-2{
        background-position: -101px -481px;
    }

    .icon-7-3{
        background-position: -188px -481px;
    }

    .icon-7-4{
        background-position: -275px -481px;
    }


</style>
